<template>
  <div>
    <template>
      <el-table
          height="400"
          :data="tableData"
          stripe
          style="width: 100%">

        <el-table-column prop="classFee" label="课程价格" width="180">
        </el-table-column>
        <el-table-column prop="subjectName" label="科目名称">
        </el-table-column>
        <el-table-column prop="studentName" label="学生名称">
        </el-table-column>
        <el-table-column prop="classDate" label="上课日期">
        </el-table-column>
        <el-table-column prop="beginTime" label="开始时间" width="180">
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间">
        </el-table-column>
        <el-table-column  label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="show(scope.row.studentId,scope.row.id)">调课</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div>
      <el-pagination
          background
          :page-count="count"
          :page-size="pageSize"
          :current-page="pageCurrent"
          @current-change="pageChange"
          layout="prev, pager, next"
          :total="total">
      </el-pagination>
    </div>

    <el-drawer
        title="请选择调课日期！"
        :before-close="handleClose"
        :visible.sync="dialog"
        direction="ltr"
        custom-class="demo-drawer"
        ref="drawer"
    >
      <div class="demo-drawer__content">
        <el-form :model="tbClass">
          <el-form-item label="上课日期" :label-width="formLabelWidth">
            <el-date-picker
                v-model="tbClass.classDate"
                type="date"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="上课时间" :label-width="formLabelWidth">
            <el-select v-model="tbClass.classtimeId" placeholder="请选择上课时间">
                <el-option v-for="item in classTimes" :key="item.id" :label="item.beginTime" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "WillStudents",
  data() {
    return {
      tbClass: {
        classDate:'',
        classtimeId:'',
        studentId:'',
        teacherId:'',
        id:''
      },
      formLabelWidth: '80px',
      timer: null,
      dialog: false,
      tableData: [],
      id:null,
      token:'',
      pageSize:5,
      count:5,
      total:100,
      pageCurrent:1,
      loading: false,
      classTimes:[],
      studentId:''
    }
  },
  methods: {
    show(studentId,classId){
      this.dialog = true;
      this.tbClass.studentId = studentId
      this.tbClass.id = classId
    },
    getClassTime(){
      this.$http.post("teacher/getClassTime").then(res=>{
        this.classTimes = res.data.result.classTimes;

      })
    },
    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm('确定要提交表单吗？')
          .then(_ => {
            this.loading = true;
            this.timer = setTimeout(() => {
              done();
              console.log(this.form)
              this.$http.post("/teacher/changeClass",this.tbClass).then(res=>{
                console.log(res)
                if (res.data.success){
                  this.$message({
                    message: res.data.message,
                    type: 'success'
                  });
                  location.reload()
                }else {
                  this.$message({
                    message: res.data.message,
                    type: 'error'
                  });
                }
              })
              // 动画关闭需要一定的时间
              setTimeout(() => {
                this.loading = false;
              }, 400);
            }, 2000);
          })
          .catch(_ => {});
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },
    changeClass(studentid){
      this.$router.push({name:'changeClass',params:{studentid}})
    },
    pageChange(page){
      this.pageCurrent = page;
      this.getClassPage();
      console.log(page)
    },
    getClassPage() {
      this.token = localStorage.getItem("token")
      this.tbClass.teacherId = localStorage.getItem("id")
      this.$http.post("teacher/getwillClassPage?userId="+this.tbClass.teacherId+"&pageCurrent="+
          this.pageCurrent+"&pageSize="+this.pageSize).then(res=>{
        console.log(res)
        this.tableData=res.data.result.teachers.records;
        this.total = res.data.result.teachers.total;
      })
    }
  },
  mounted() {
    this.getClassPage()
    this.getClassTime()
  }
}
</script>

<style scoped>
.el-pagination{
  float: right;
}

</style>